<template>
  <div class="homeDistributor">
     <!-- 我的分享 -->
    <div class="my-subordinate">
      <p><span>我的分享</span></p>
      <ul>
        <li @click="toggle(index)" v-for="(tab,index) in tabs" :class="{active:active==index}" :key="index">
           {{tab}}
        </li>
      </ul>
    </div>
    <p class="member"> 会员信息 </p>
    <!-- 会员信息列表 -->
    <div class="member-list">
      <template v-for="(item,index) in memberitems">
        <div class="list clearfix" :key="index">
          <div class="pImg fl">
           <img class="pImg" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512191560341&di=85f40065fe1635ff9575bb2e909eab18&imgtype=0&src=http%3A%2F%2Fwww.fzlqqqm.com%2Fuploads%2Fallimg%2F20150207%2F20150207125610343.jpg" alt="">
           </div>
         <div class="pInfo fl">
           <p class="userName">{{item.userID}}</p>
           <p>渠道： {{item.parentID}}</p>
           <p>时间： {{formatDateDT(new Date(item.createTime),'yyyy-MM-dd')}}</p>
         </div>
        </div>
        </template>
    </div>
  </div>
</template>

<script>
export default {
  created () {},
  mounted () {
    this.getMember()
  },
  data () {
    return {
      filters: {pageSize: 100, pageNow: 1, token: this.$store.state.token, rank: 1},
      memberitems: [],
      tabs: [ '直接', '间接' ],
      active: 0
    }
  },
  methods: {
    getMember () {
      this.$http.post('http://218.104.153.143:8089/numberone-auth/busiUser/downUserList.shtml', this.filters, {
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        emulateJSON: true
      }).then((data) => {
        this.memberitems = data.body.userAccountInfo.records
      }, (ne) => {
        this.$message({
          message: '数据获取失败',
          type: 'error',
          duration: 1000,
          showClose: false
        })
      })
    },
    toggle (i) {
      this.active = i
      this.filters.rank = i + 1
      this.getMember()
    },
    formatDateDT (date, fmt) {
      var o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        'S': date.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      for (var k in o) { if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
      return fmt
    }
  }
}
</script>

<style lang="scss" type="stylesheet/scss">
.homeDistributor{
  font-size: 12px;
  .my-subordinate{
    height: 100px;
    background-color: #F6F6F6;
    p{
      line-height: 50px;
      height: 50px;
      text-align: left;
      font-size: 14px;
      span{
        border-left: 4px solid #2FC127;
        padding-left: 4px;
      }
    }
    .active{
       background-color:#2FC127;
       color: #fff;
    }
    ul{
      width: 80%;
      margin: 0 auto;
      li{
        float: left;
        width: 33.3%;
        height: 26px;
        line-height: 26px;
        border: 1px solid #2FC127;
        color:#2FC127;
      }

    }
  }
  .member{
    height: 45px;
    line-height: 45px !important;
    text-align: left;
    font-size: 14px;
    width: 95%;
    margin: 0 auto;
    border-bottom: 1px solid #e3e3e3;
  }
  .member-list{
    background-color: #F6F6F6;
    margin-bottom: 60px;
    padding:0 11px;
    .list{
      background-color: #fff;
      margin-bottom: 10px;
      padding: 2px 11px;
      text-align: left;
      border-bottom: 1px solid #e3e3e3;
        .pImg{
          width:82px;
          height: 82px;
          overflow: hidden;
          border-radius: 50%;
          }
        .pInfo{
           color:#686868;
          margin-left: 20px;
          line-height:22px;
          padding-top:5px;
          .userName{
            font-size:15px;

          }
        }
    }
    }
}
</style>
